<template>
  <div class="image page page_padding">
    <h1 class="tips">图片</h1>
    <div class="container">
      <transition-group name="slide-fade">
        <router-link v-for="img in images" :to="`/image/${img?.iid}`" :key="img?.iid">
          <ArticleCard
            :src="`${apis.static}/file/${img?.file?.fencodedMd5}`"
            :intro="img?.file?.fname"
          />
        </router-link>
      </transition-group>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { apis } from "../api";
import ArticleCard from "../components/ArticleCard.vue";

export default {
  components: { ArticleCard },
  beforeRouteEnter(to, from, next) {
    apis.checkLogin(next, {
      title: "尚未登录，请登录",
      icon: to.meta.icon,
      showDuration: 5000,
    })
  },
  setup() {
    const data = reactive({
      images: []
    })

    const getAllImage = () => {
      apis.getAllImage().then(response => {
        response.data.result.forEach(img => {
          data.images.push(img)
        });
      })
    }

    getAllImage()
    return { ...toRefs(data), apis }
  }
}
</script>

<style scoped lang="less">
.image {
  min-height: 100vh;
}
.container {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}
</style>